<template>
    <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false"  label-position="left" v-loading="loading">
        <el-form-item label="标题" required prop="name">
            <el-input v-model="form.name" placeholder="文章标题" size="small" clearable class="input"></el-input>
        </el-form-item>
        <el-form-item label="种类">
            <el-input type="text" v-model="form.type" class="input"></el-input>
        </el-form-item>
         <el-form-item label="规格">
            <el-input type="text" v-model="form.size" class="input"></el-input>
        </el-form-item>
         <el-form-item label="原产地">
            <el-input type="text" v-model="form.origin" class="input"></el-input>
        </el-form-item>
         <el-form-item label="交易地">
            <el-input type="text" v-model="form.trad_place" class="input"></el-input>
        </el-form-item>
         <el-form-item label="价格">
            <el-input type="text" v-model="form.price" class="input"></el-input>
        </el-form-item>
         <el-form-item label="推荐">
            <el-switch v-model="form.rec"></el-switch>
        </el-form-item>
        <el-form-item label="详情文字描述" required prop="detail_text">
            <el-input type="textarea" v-model="form.detail_text" class="input"></el-input>
        </el-form-item>

        <el-form-item label="详情图片描述" >
            <el-upload
            action="http://localhost/api/upload/test"
            list-type="picture-card"
            :file-list="form.img_list"
            :on-change="handleChange"
            :on-preview="handlePictureCardPreview"
            :auto-upload="false"
            multiple 
            >
                <i class="el-icon-plus"></i>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img style="height: 400px; object-fix: contain" :src="dialogImageUrl">
            </el-dialog>
        </el-form-item>
        
        <!-- http://jr1test.oss-cn-beijing.aliyuncs.com/upload/20201214/db2c70c7ac862230f1e5baba6d0447ae.png -->
        <el-form-item label="缩略图">
            <el-input v-model="form.thumb" placeholder="可留空，将从内容提取" size="small" clearable class="input"></el-input>
            <el-upload
            action="http://localhost/api/upload"
            :on-success="handleUploadSuccess"
            >
                <el-button type="text" size="large">
                    <i class="el-icon-upload"></i>
                </el-button>
                <template #tip>只能上传图片，不能超过1M</template>
            </el-upload>
        </el-form-item>
       
        
        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button>清空</el-button>
        </el-form-item>
    </el-form>
    
   

</template>


<script>

//api
import { adminSupply } from "@/api/content.js"
import { mapMutations } from 'vuex'
export default {
    name: "ArticleAdd",
    components: {

    },
    data(){
        return {
            form: {
                id: '',
                name: '',
                type: '',
                size: '',
                origin: '',
                trad_place: '',
                add_time: '',
                update_time: '',
                price: '',
                rec: 0,
                detail_text: '',
                img_list: [],
                thumb: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                ],
                detail_text: [
                    { required: true, message: '请填写文章内容', trigger: 'blur' }
                ]
            },
            init: {
                language_url: '/tinymce/langs/zh_CN.js',// 语言包的路径
                language: 'zh_CN',//语言
                height: 300,//编辑器高度
                branding: false,//是否禁用“Powered by TinyMCE”
                menubar: true,//顶部菜单栏显示
                images_upload_url: "http://localhost/api/upload/tinymce",
                plugins: [
                'lists link image ',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste  help wordcount'
                ],
                toolbar:
                'undo redo | formatselect | bold italic backcolor | image\
                alignleft aligncenter alignright alignjustify | \
                bullist numlist outdent indent | removeformat | help'
            },
            loading: false,
            dialogImageUrl: "",
            dialogVisible: false,
        }
    },
    mounted(){

    },
    methods: {
        ...mapMutations('as', [
            'unshiftSupply'

        ]),
       
        async onSubmit(){
            this.loading = true;
            if (this.form.name === "" || this.form.detail_text == ""){
                this.$message({
                    showClose: true,
                    type: "error",
                    message: "请将标题、内容填写完整",
                })
                 this.loading = false;
                return;
            }

            //files
            let formData = new FormData();
            for (let i = 0; i < this.form.img_list.length; i++){
                let blob = await fetch(this.form.img_list[i].url).then(r => r.blob())
                formData.append(`file${i}`, blob, this.form.img_list[i].name)
            }
            //other parm
            delete this.form.img_list
            Object.keys(this.form).forEach(key=>{
                console.log(key, this.form[key]);
                formData.append(key, this.form[key])
            })
            //add
            let data = await adminSupply.add(formData)
            //done

            this.loading = false;
            this.unshiftSupply(data.supply)
            this.$message({
                showClose: true,
                type: 'success',
                message: "添加成功"
            })
            this.form = {
                id: '',
                name: '',
                type: '',
                size: '',
                origin: '',
                trad_place: '',
                add_time: '',
                update_time: '',
                price: '',
                rec: '',
                detail_text: '',
                img_list: [],
                thumb: '',
            };
        },
        handleUploadSuccess(response){
            this.form.image = response.url
        },
        handlePictureCardPreview(file){
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleChange(file){
            if(file.status==="ready"){
                this.form.img_list.push(file)
            }
        },
        
        handleUploadSuccess2(response, file, fileList){
            console.log('res', response)
            console.log('file', file)
            console.log('file list', fileList)
        }
    }
    
}
</script>

<style lang="scss" scope>
.article-table-container {
    margin: 0 auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
}
.input {
    max-width: 60%;
}
</style>